<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .container {
      --rd: 360deg;
      display: grid;
      /* 4x4 网格 */
      grid-template-columns: repeat(4, 1fr);
      grid-template-rows: repeat(4, 1fr);
      grid-template-areas: 
        'A A A B'
        'D a b B'
        'D d c B'
        'D C C C'
      ;
      gap: 8px;

      animation: parent 10s infinite linear;

      width: 500px;
      height: 500px;
      margin: 200px auto;
      

      .grid_item {
        display: flex;
        justify-content: center;
        align-items: center;
        overflow: hidden;
        border: 2px solid black;

        &:nth-child(1) {
          grid-area: A;
        }
        &:nth-child(2) {
          grid-area: B;
        }
        &:nth-child(3) {
          grid-area: C;
        }
        &:nth-child(4) {
          grid-area: D;
        }
        &:nth-child(5) {
          grid-area: a;
        }
        &:nth-child(6) {
          grid-area: b;
        }
        &:nth-child(7) {
          grid-area: c;
        }
        &:nth-child(8) {
          grid-area: d;
        }

        & img {
          --rd: -360deg;
          width: 350%;
          height: 350%;
          object-fit: cover; /*避免图片失去比例*/

          animation: parent 10s infinite linear;
        }
      }
    }
    @keyframes parent {
      to {
        transform: rotate(var(--rd));
      }
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="grid_item"><img src="../images/01.jpg" alt=""></div>
    <div class="grid_item"><img src="../images/02.jpg" alt=""></div>
    <div class="grid_item"><img src="../images/03.jpg" alt=""></div>
    <div class="grid_item"><img src="../images/04.jpg" alt=""></div>
    <div class="grid_item"><img src="../images/05.jpg" alt=""></div>
    <div class="grid_item"><img src="../images/06.jpg" alt=""></div>
    <div class="grid_item"><img src="../images/07.jpg" alt=""></div>
    <div class="grid_item"><img src="../images/08.jpg" alt=""></div>
  </div>
</body>
</html>